<template>
	<view class="middle-container">
		<u-navbar class="navbar" :border-bottom="false" title="售后" :title-size="36" :title-bold="true" :title-color="textColor" :background="{backgroundColor: '#fff'}">
			<view class="u-p-r-30" slot="right" @click="$mRouter.push({ route: '/pages/purchase/order/historyService?id='+tradeId})">
				<text>历史售后</text>
			</view>
		</u-navbar>
		<view class="service-type">
			<view class="service-title">选择售后类型</view>
			<!-- 切换tabbar 自动识别或手动输入 -->
			<view class="register-header u-flex u-row-between">
				<view :class="['u-flex','header-item', 'u-m-r-42', 'u-row-center', {'header-item-active':tabbarIndex===0}]" @click="tabbarChange(0)">
					<u-icon name="rmb-circle" size="42" :color="tabbarIndex ===0?'#ff551a':'#666'"></u-icon>
					<text class="u-font-32 u-m-l-10" :style="{'color':tabbarIndex === 0?'#ff551a':'#666'}">仅退款</text>
					<view class="mark-yes" v-show="tabbarIndex===0">
						<u-icon name="checkmark" color="#fff"></u-icon>
					</view>
				</view>
				<view :class="['u-flex','header-item', 'u-row-center', {'header-item-active':tabbarIndex===1}]" @click="tabbarChange(1)">
					<!-- <u-icon name="edit-pen" size="38" :color="tabbarIndex === 1?'#ff551a':'#666'"></u-icon> -->
					<text class="iconfont icon-huo" :style="{color:tabbarIndex === 1?'#ff551a':'#666','fontSize':'38rpx'}"></text>
					<text class="u-font-32 u-m-l-10" :style="{'color':tabbarIndex === 1?'#ff551a':'#666'}">退货退款</text>
					<view class="mark-yes" v-show="tabbarIndex===1">
						<u-icon name="checkmark" color="#fff"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-cell-group>
			<u-cell-item title="请选择售后类型" :arrow="false" :border-bottom="false" :title-style="titleStyle" hover-class="none" style="height: 90rpx"></u-cell-item>
			<u-cell-item title="我要退款（无需退货）" @click="$mRouter.push({ route: $mHelper.objParseUrlAndParam('/pages/purchase/order/tuikuan', info) })"></u-cell-item>
			<u-cell-item title="我要退货" :border-bottom="false" @click="$mRouter.push({ route: $mHelper.objParseUrlAndParam('/pages/purchase/order/tuihuo', info) })"></u-cell-item>
		</u-cell-group> -->
		<view class="box-color u-p-l-30 u-p-t-30 u-p-r-30" >
			<view class="service-title">选择售后商品</view>
			<u-checkbox-group style="width:100%"  :wrap="true" :size="40" :icon-size="20" :label-disabled="true" shape="circle" :active-color="themeColor">
				<u-checkbox 
					:labelClass="true"
					v-model="info.checked" 
					 v-for="(info,index) in itemlist" :key="info.id"
					:name="index"
					style="width: 100%; background-color: #fff;"
				>
					<view class=" u-flex u-p-t-20 u-p-b-20 u-p-l-20">
						<view style="font-size: 0;">
							<image :src="info.url" style="width: 120rpx;height: 120rpx;border-radius: 10rpx;" mode=""></image>
						</view>
						<view class="u-m-l-20 u-flex-col u-row-around u-flex-1" style="height: 120rpx;">
							<text class="u-font-30">{{ info.itemName }}</text>
							<view class="u-flex u-row-between">
								<view class="grey-box u-m-r-20">
									{{ info.specification }} 
								</view>
								<!-- 修改数量 -->
								<number-box 
								 boxWidth="100rpx" width="200rpx" height="50rpx" fontSize="28rpx"
								 :value="info.quantity" :step="1" 
								:min="1" :max="info.max"
								@change="updateQuantity($event, index)"
								></number-box>
							</view>
						</view>
					</view>
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<!-- 提交 -->
		<view class="btn-container" style="padding: 35rpx 35rpx 100rpx 35rpx">
			<u-button shape="circle" :hair-line="false" hover-class="none" :ripple="true"
				:custom-style="getBtStyle('default','',90)" @click="handleSubmit">确认售后</u-button>
		</view>
	</view>
</template>

<script>
	import NumberBox from '@/components/number-box/index.vue'
	export default {
		components:{NumberBox},
		data() {
			return {
				titleStyle: {
					fontSize: '32rpx',
					fontWeight: 'bold',
					color: this.textColor
				},
				info: {},
				itemlist:[],
				tabbarIndex:0,
				tradeId:''
			}
		},
		onLoad(option) {
			this.itemlist = JSON.parse(option.item).map(item=>{
				item.checked = false;
				item.max = item.quantity;
				return item;
			});
			this.tradeId = option.id;
		},
		methods:{
			updateQuantity(count,index){
				this.itemlist[index].quantity = count;
			},
			tabbarChange(val){
				this.tabbarIndex = val;
			},
			handleSubmit(){
				let chooseData = this.itemlist.filter(item=>{
					return item.checked
				})
				if(chooseData.length === 0){
					this.$u.toast('售后商品不得为空~');
					return false;
				};
				this.$mRouter.push({
					route:'/pages/purchase/order/appealService',
					query:{
						item:JSON.stringify(chooseData),
						type:this.tabbarIndex,
						id:this.tradeId
					}
				})
				
			},
		}
	}
</script>

<style lang="scss">
	@import '@/static/iconfont/iconfont.css';
	.middle-container{
		min-height: 100%;
		background-color: #fff;
		.service-type{
			padding: 35rpx;
			border-bottom: 20rpx solid #f8f8f8;
		}
		.service-title{
			font-weight: bold;
			font-size: 32rpx;
		}
		.btn-container{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			border-top: 1rpx solid #eaeeea;
		}
		.register-header{
			margin: 28rpx 0 0;
			.header-item{
				flex:1;
				box-sizing: border-box;
				padding: 24rpx 0;
				border: 2rpx solid #CCCCCC;
				border-radius: 8rpx;
				color: #666;
			}
			.header-item-active{
				border: 2rpx solid #FF551A;
				background-color: #FFEEE8;
				position: relative;
				color: #FF551A;
				.mark-yes{
					display: block;
					position: absolute;
					width: 34rpx;
					height: 34rpx;
					text-align: center;
					background-color: #ff551a;
					bottom: 0;
					right: 0;
					border-radius: 5rpx;
					border-bottom-right-radius: 9rpx;
				}
				
			}
		}
	}
</style>
